{include file="admin@public/header"/}

<style>
	#matchCon {
		width: 160px;
	}

	.url-box {
		padding: 5px 10px;
		line-height: 26px;
		cursor: pointer;
	}

	.url-box a {
		margin-right: 5px;
	}

	.ui-droplist-wrap .list-item:hover {
		background-color: #faffad;
	}

	.layui-form-checkbox[lay-skin=primary] i {
		padding: 0;
	}

	.icon-helpBox {
		height: 40px;
	}

	.drop-down-wrap {
		position: absolute;
		display: none;
	}

	/* .icon-helpBox>img:hover .drop-down-wrap{display: block;} */
</style>

<div class="bill-ser-top">
	<ul class="ul-inline cf layui-form">
		<li style="display: list-item;">
			<label>供应商:</label>
			<span class="ui-combo-wrap" id="filter-goods">
				<input id="goodsAuto" type="text" name="" class="input-txt" autocomplete="off" value="" data-ref="date">
				<i class="ui-icon-ellipsis"></i>
			</span>
		</li>
		<li style="display: list-item;">
			<span id="expense">
				<span class="ui-combo-wrap ui-combo-active" id="expenseType" style="width: 168px;">
					<input type="text" class="input-txt" autocomplete="off" readonly="readonly"
						style="cursor: default; width: 140px;" value="所有支出项目" id="expenseTypeName">
					<span class="trigger"></span>
				</span>
				<div class="ui-droplist-wrap" id="expenseTypeBox"
					style="position: absolute; top: 42px; z-index: 1000; width: 168px; left: 63.7812px; display: none;">
					<div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
						<div class="list-item selected" data-id="-1" title="所有支出项目">所有支出项目</div>
						<div class="list-item" data-id="129127919158566" title="住宿费">住宿费</div>
						<div class="list-item" data-id="129277993377956" title="差旅费">差旅费</div>
						<div class="list-item" data-id="129277993377957" title="餐饮费">餐饮费</div>
					</div>
				</div>
			</span>
		</li>

		<li>
			<label>日期:</label>
			<input type="date" id="startdate" class="ui-input " value="" style="width: 125px;">
			<i>-</i>
			<input type="date" id="enddate" class="ui-input " value="" style="width: 125px;">
		</li>
		<li style="display: list-item;height: 44px;padding-top: 10px;box-sizing: border-box;">
			<label>付款状态:</label>
			<input type="checkbox" id="hasPurReady" name="" lay-skin="primary" title="未付款">
			<input type="checkbox" id="hasPurReady" name="" lay-skin="primary" title="已付款">
			<input type="checkbox" id="hasPurReady" name="" lay-skin="primary" title="部分付款">
		</li>


		<li>
			<a class="ui-btn mrb" id="search">查询</a>
			<a class="ui-btn mrb" id="export" href="javascript:void(0);">导出</a>
			<a class="ui-btn mrb" id="toPay">支付费用</a>
			<a href="javascript:void(0);" id="expenseTips" class="icon-helpBox" style="position: relative;">
				<img src="/public/static/admin/css/img/help.png" style="width: 25px;height: 25px;" />
				<div class="drop-down-wrap" id="expenseTipsConBox" style="width: 275px;">
					<div class="drop-down" style="height: 90px;">
						<span class="triangle-border" style="left: 100px;top: -23px;"></span>
						<span class="triangle-bg" style="left: 99px;top: -22px;"></span>
						<ul>
							<li class="" style="text-align: left">
								<a href="javascript:void(0);" target="">
									<p>温馨提示：费用清单生成的其他支出单已支持挂账，当费用清单生成了一次其他支出单并进行了挂账，则对应的费用清单再次支付不允许生成其他支出单，如果需要支付这笔费用，请您通过付款单进行支付，谢谢！
									</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</a>
		</li>
		<!-- <li class="url-box" id="openUrl"><a href="https://club.kingdee.com/club/newclub/school/course?product_id=7&amp;cid=1548#pid=5704" target="_blank" class="video-icon"></a>购货订单查询</li> -->
	</ul>
</div>


<div class="wrapper btc">
	<div class="bill-ser-botm">
		<div class="cf">
			<div class="ui-config-box">
				<span id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a>列设置</span>
				<span><span style="color: red;">√</span> 表示这笔费用已分摊入商品购货成本</span>
			</div>
		</div>
	</div>
	<div class="grid-wrap">
		<table id="grid">
		</table>
		<div id="page"></div>
	</div>
</div>

<!-- 隐藏区域，用于赋值 -->
<div style="display: none;">
	<!-- 费用类型 -->
	<input type="text" id="expenseTypeId" autocomplete="off">
</div>



<script type="text/javascript">
	//$(function(){
	$(document).ready(function () {
		//alert("1111");
		$("#grid").jqGrid({
			url: '/scm/purchasesaleslist/index.html?ajax=100',
			datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '90%',//高度，表格高度。可为数值、百分比或'auto'
			//width: Public.setGrid().w,
			//height: Public.setGrid().h,
			colNames: ['id', "供应商", "支出类别", "金额", "未付费用", "源单号", "源单往来单位", "其他支出单编号", "源单日期", "备注", "付款状态"],
			colModel: [
				{ name: 'id', hidden: true },
				{ name: 'customer', lable: "供应商", width: 150 },
				{ name: 'money_type', lable: "支出类别", width: 120 },
				{ name: 'price', lable: "金额", width: 80 },
				{ name: 'unpaid_amount', lable: "未付费用", width: 80 },
				{ name: 'sn', lable: "源单号", width: 150, formatter: sn },
				{ name: 'enterprise', lable: "源单往来单位", width: 150 },
				{ name: 'other_sn', lable: "其他支出单编号", width: 150 },
				{ name: 'addtime', lable: "源单日期", width: 120 },
				{ name: 'mark', lable: "备注", width: 200 },
				{ name: 'pay_status', lable: "付款状态", width: 100 }
			],
			rowNum: 10,
			rowList: [10, 20, 30],
			sortname: 'id',
			sortorder: "desc",
			pagerpos: "left",//分页位置
			multiselect: true,//自带多选
			//multiboxonly:true,//变成单选
			pgbuttons: true,//翻页按钮
			pagination: true,
			altRows: !0,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			// 合计
			footerrow: true,
			gridComplete: function () {
				var numbers = $("#grid").getCol('number', false, 'sum');
				var purchase_costs = $("#grid").getCol('purchase_cost', false, 'sum');
				var after_discounts = $("#grid").getCol('after_discount', false, 'sum');
				$("#grid").footerData('set', { "supplier_name": '合计', number: numbers, purchase_cost: purchase_costs, after_discount: after_discounts });

				var grid = $("#grid");
				var col_hs = grid.getCol('col_h', false);//获取某一列
				var ids = grid.getDataIDs();
				var rowDatas = grid.jqGrid("getRowData");//获取所有行的数据
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			}
		});

		function sn(cellvalue, options, rowObject) {
			return rowObject.sn + (rowObject.is_cb == 0 ? '' : ' <span style="color:red">√</span>');
		}

	});


</script>
<script type="text/javascript">
	$(document).ready(function () {

		// 获取当前日期
		var myDate = new Date;
		var year = myDate.getFullYear(); //获取当前年
		var mon = myDate.getMonth() + 1; //获取当前月
		var date = myDate.getDate(); //获取当前日
		// console.log(year + '-' + mon + '-' + date)
		if (mon < 10) {
			mon = "0" + mon;
		}
		if (date < 10) {
			date = "0" + date;
		}
		$("#startdate").val(year + '-' + mon + '-01');
		$("#enddate").val(year + '-' + mon + '-' + date);

		// 鼠标移入移除tip
		$("#expenseTips>img").hover(function () {
			var top = $(this).parent().offset().top;
			var left = $(this).parent().offset().left;
			$("#expenseTipsConBox").show();
			$("#expenseTipsConBox").css({ "top": (top + 26) + "px", "left": (left - 90) + "px" });

		}, function () {
			$("#expenseTipsConBox").hide();
		});


		// 点击选择类型弹窗
		$("#expenseType").on("click", function () {
			var top = $(this).parent().offset().top;
			var left = $(this).parent().offset().left;
			$("#expenseTypeBox").toggle();
			$("#expenseTypeBox").css({ "top": (top + 26) + "px", "left": left + "px" });
		});
		// 点击赋值
		$("#expenseTypeBox .droplist").on("click", ".list-item", function () {
			var typeName = $(this).attr("title");
			var typeId = $(this).attr("data-id");
			$("#expenseTypeName").val(typeName);
			$("#expenseTypeId").val(typeId);
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#expenseTypeBox").hide();
		});
		//类型选择框外点击则隐藏
		$(document).mouseup(function (e) {
			// if(e.target.id!="#expenseType"){
			var con = $("#expense");   // 设置目标区域
			if (!con.is(e.target) && con.has(e.target).length === 0) {
				$("#expenseTypeBox").hide();
			}
			// } 
		});
	});
</script>

{include file="admin@public/footer"/}